<template>
	<div class="user-log-wrapper">
		
		<div class="hover"></div>

		<user-login-card class="user-login-card"
		:class="{backFace: state !== 'log'}"
		@toReg="toReg"
		@toFindpwd="toFindpwd"
		@exit="$emit('exit')"
		></user-login-card>

		<user-regis-card class="user-regis-card"
		:class="{backFace: state !== 'reg'}"
		ref="regisCard"
		@toLog="toLog"
		@exit="$emit('exit')"
		></user-regis-card>

		<user-findpwd
			class="user-findpwd"
			:class="{backFace: state !== 'find'}"
			ref="findpwd"
			@exit="$emit('exit')"
			@toLog="toLog"
		/>
		
	</div>
</template>

<script>
import UserLoginCard from '../UserLogCom/UserLoginCard.vue'
import UserRegisCard from '../UserLogCom/UserRegisCard.vue'
import UserFindpwd from '../UserLogCom/UserFindpwd.vue'

export default {
	components: {
		UserLoginCard,
		UserRegisCard,
		UserFindpwd
	},
	data() {
		return {
			state: 'log'
		}
	},
	computed: {
	},
	methods: {
		toReg() {
			this.state = 'reg';
			this.$refs.regisCard.loadVeriImg();
		},
		toLog() {
			this.state = 'log';
		},
		toFindpwd() {
			this.state = 'find';
		},
	}
}
</script>

<style scoped lang="less">
@w: 28vw;

.user-log-wrapper {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hover {
	width: 100vw;
	height: 200vw;
	position: fixed;
	background-color: var(--dark);
}

.user-login-card,
.user-regis-card,
.user-findpwd {
	position: absolute;
	transition: .3s;
	backface-visibility: hidden;
}

.user-login-card {
	--userLoginCardWidth: @w;
}

.user-regis-card {
	--userRegisCardWidth: @w;
}

.user-findpwd {
	--userFindpwdWidth: @w;
}
</style>